<template>
  <el-row :gutter="20" :data="data">
    <el-row class="cus-info-title">{{option.title}}</el-row>
    <el-row class="cus-info-row">
      <div v-for="(item, index) in option.column" :key="index">
        <el-col v-if=!isShowFlag :span="24" class="line-distance mt6">
          <el-col :span="12">{{item.label}}：</el-col>
          <el-col :span="12">{{data[item.prop]}}</el-col>
        </el-col>
        <el-col v-if=isShowFlag :span=item.span class="line-distance mt6">
          <el-col :span="12">{{item.label}}：</el-col>
          <el-col v-if=!item.cusInput :span="12">{{data[item.prop]}}</el-col>
          <el-col v-else=item.cusInput :span="12" class="item-rightSet">
            <el-input v-model="data[item.prop]" placeholder="请输入内容"></el-input>
          </el-col>
        </el-col>
      </div>
    </el-row>
  </el-row>
</template>

<script>
    export default {
      name: "bizCustInfo",
      props: ['data', 'option', 'showDetail', 'isShowFlag'],
    }
</script>

<style scoped>
.cus-info-title {
  font-weight: bold;
}
  .line-distance{
    height: 40px;
    line-height: 40px;
  }
  .item-rightSet{
    padding-right: 5px;
  }
  .mt6{
    margin-top: 6px;
  }
</style>
